<template>
  <div class="rescue-dialog">
    <el-dialog :visible.sync="visible">
      <div :class="`${form.status1 === 3 ? 'rescue-container' : form.status1 === 4 ? 'rescue-container' : 'rescue-conta' } rescue-c`">
        <div class="panelWrap rescue-content">
          <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
            <div>救援工单详情</div>
            <i class="el-icon-close" @click="handleCloseDialog" />
          </div>
          <div class="rescue-main flex flexdc flexcenter m-t-30 m-b-30">
            <div class="ulbox flex">
              <ul class="m-r-40">
                <li>
                  <span class="s1">工单编号：</span>
                  <el-input v-model="form.name" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">报警人：</span>
                  <el-input v-model="form.warningMan" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">报警来源：</span>
                  <el-input v-model="form.warningfrom" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">响应等级：</span>
                  <el-input v-model="form.level" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">注册代码：</span>
                  <el-input v-model="form.registerCode" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">救援代码：</span>
                  <el-input v-model="form.rescueCode" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">救援地址：</span>
                  <el-input v-model="form.useUnitAddress" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">创建时间：</span>
                  <el-input v-model="form.ctrData" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">创建人：</span>
                  <el-input v-model="form.ctrOpr" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">指派时间：</span>
                  <el-input v-model="form.assignTime" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">受理时间：</span>
                  <el-input v-model="form.acceptTime" class="s2" readonly />
                </li>
                <li v-if="form.status1 === 3 || form.status1 === 4" class="li1 m-t-15">
                  <span class="s1">到达图片：</span>
                  <el-image :src="form.arriveImg" class="img" fit="fill" lazy />
                </li>
              </ul>
              <ul>
                <li>
                  <span class="s1">到达时间：</span>
                  <el-input v-model="form.arriveTime" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">故障原因：</span>
                  <el-input v-model="form.season" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">工单状态：</span>
                  <el-input v-model="form.status" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">警情状态：</span>
                  <el-input v-model="form.state" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">警情结果：</span>
                  <el-input v-model="form.results" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">最后修改时间：</span>
                  <el-input v-model="form.lstEdtData" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">最后修改人：</span>
                  <el-input v-model="form.lstEdtOpr" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">完成时间：</span>
                  <el-input v-model="form.finishTime" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">救援人数：</span>
                  <el-input v-model="form.savePeopleNumber" class="s2" readonly />
                </li>
                <li>
                  <span class="s1">救援结果：</span>
                  <el-input v-model="form.result" class="s2" readonly />
                </li>
                <li v-if="form.status1 === 4" class="li m-t-15 m-b-10">
                  <span class="s1">完成图片：</span>
                  <el-image :src="form.finishImg" class="img1" fit="fill" lazy />
                </li>
                <li v-if="form.status1 === 4" class="li">
                  <span class="s1">救援图片：</span>
                  <el-image :src="form.saveImg" class="img1" fit="fill" lazy />
                </li>
              </ul>
            </div>
            <!-- <div class="flex footer m-t-70 m-b-40">
              <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
              <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
              <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
            </div> -->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

// import { showNotice } from '@/utils/toolclass'
// import { miOrderAdd, miOrderUpdate } from '@/api/maintenance/order'
// import { elevatorQueryList } from '@/api/elevator/elevator'

export default {
  components: {},
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      form: { ...this.data }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      // console.log(v)
      this.form = { ...v }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleCloseDialog() {
      this.visible = !this.visible
      this.$emit('handleCloseDialog')
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/public.scss";
.rescue-dialog {
  .rescue-c {
    width: 1000px;
    background: #ffffff;
    margin-left: -200px;
  }
  .rescue-container {
    margin-top: -130px;
  }
  .rescue-conta {
    margin-top: 0;
  }
  .rescue-content {
    min-height: 560px;
    .rescue-main {
      .ulbox {
        width: 100%;
        flex: 1;
        ul {
          width: 50%;
          li {
            height: 36px;
            display: flex;
            .s1 {
              width: 120px;
              line-height: 36px;
              text-align: right;
            }
            .s2 {
              flex: 1;
              line-height: 36px;
              .el-input__inner {
                border: 1px solid #ffffff !important;
              }
            }
            .img {
              width: 340px;
              border-radius: 10px;
              height: 300px;
              opacity: .5;
            }
          }
          .li1 {
            height: 340px;
          }
          .li {
            height: 220px;
            .img1 {
              width: 300px;
              border-radius: 10px;
              height: 200px;
              opacity: .5;
            }
          }
        }
      }
    }
    .footer {
      .btn {
        height: 40px;
      }
    }
  }
}
</style>
